<template>
  <div>
    <div id="yuQing_map" :style="{width: '100%', height: '380px',}"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

import "echarts/map/js/province/xinjiang.js";
import obj from "echarts/map/json/province/xinjiang.json";

function city(name, value) {
  this.name = name
  this.value = value
}

export default {
  name: "yuQing_map",
  data() {
    return {
      listArr: [], //城市json
      max: "", //最大value值
      min: "" // 最小value值
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.DrawMap();
  },
  methods: {

    // 新疆地图
    async getData() {
      // let _this = this
      // let {data: res} = await this.$http.get('http://127.0.0.1:3000/mock/11/api/get-index-data')
      // console.log("城市地图", res.data.map)
      //
      // for(let i in res.data.map){
      //   this.listArr.push(res.data.map[i])
      // }


    },
    async DrawMap(array) {
      let _this = this;

      let {data: res} = await this.$http.get('http://192.168.0.94:8080/index')

      _this.listArr=res.data.map
      console.log("城市数据2  ", _this.listArr)
      let testlist =[]
      for (let i=0;i<_this.listArr.length;i++){
        testlist.push({
          name:_this.listArr[i].loc,
          value:_this.listArr[i].num
        })
      }
      console.log(testlist)

      let myChart8 = this.echarts.init(document.getElementById("yuQing_map"));

      myChart8.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (条)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 200,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            type: "map",
            map: "新疆",
            itemStyle: {
              normal: {label: {show: true}},
              emphasis: {label: {show: true}},
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            // data: JSON.parse(JSON.stringify(this.listArr))
            data: testlist
            // data: [{"name":"乌鲁木齐市",value:"100"}]
          }
        ]
      });

      myChart8.on('click', function(params){
        // alert(1);
        // _this.$router.push("/yuQing_map_detail"+"province="+params.data.name)
        _this.$router.push("/yuQing_map_detail")
        console.log(params);//此处写点击事件内容
      });
    },
  },

}
</script>

<style scoped>
#yuQing_map {
  border: #ccd8e0 1px solid;
}
</style>
